<template>
  <div>
    <!-- 头部栏  黑马程序员.vant -->
    <top :f1="true" :f2="false"></top>
    <div style="height:100%;">
      <div v-if="!$store.getters.isEmpty">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div style="min-height:600px;">
              <van-card
                v-for="item in carList"
                :key="item.id"
                :num="item.cou"
                :price="item.sell_price"
                :title="item.title"
                :thumb="item.thumb_path"
              >
                <div slot="footer">
                  <van-stepper
                    @plus="addStepper(item.id)"
                    @minus="subStepper(item.id)"
                    v-model="item.cou"
                  />
                </div>
              </van-card>
          </div>
        </van-pull-refresh>
      </div>
      <div class="empty" v-else>
        <img src="../../assets/cart_empty.png" alt="" />
        <p>购物车空空如也</p>
        <van-button type="info" to="goods/list" size="mini">去逛逛</van-button>
      </div>
      <van-submit-bar :price="total" button-text="提交订单" />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      carList: [],
      isLoading: true
    }
  },
  computed: {
    ...mapState(['carArr']),
    // 计算总价格
    total() {
      let total = 0
      this.carArr.forEach(item => {
        console.log(item.cou)
        console.log(item.price)
        total += item.cou * item.price * 100
      })
      return total
    }
  },
  created() {
    this.getCarList()
  },
  methods: {
    ...mapMutations(['addStepper', 'subStepper']),
    goBack() {
      this.$router.go(-1)
    },
    // 获取购物车商品列表数据
    async getCarList(sp) {
      // 保存id数组
      const arr = []
      console.log(this.carArr)
      if (this.carArr.length === 0) return
      this.carArr.forEach(item => {
        arr.push(item.id)
      })
      console.log(arr)
      const ids = arr.toString()
      const { data: res } = await this.axios.get(
        `/api/goods/getshopcarlist/${ids}`
      )
      if (res.status !== 0) return this.$toast('获取商品列表失败')
      const temp = JSON.parse(localStorage.getItem('car'))
      temp.forEach(item => {
        res.message.forEach(ele => {
          if (item.id === ele.id) {
            ele.cou = item.cou
          }
        })
      })
      sp && sp()
      this.carList = res.message
    },
    // 下拉刷新页面
    onRefresh() {
      this.getCarList(() => {
        this.$toast('页面刷新成功')
        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.empty {
  color: #ccc;
  padding: 55px 0;
  text-align: center;
  img {
    width: 100px;
  }
}
.van-button--danger {
  border-radius: 0;
  color: #fff;
  background: 0;
  background-color: #ee0a24;
  border: 1px solid #ee0a24;
  height: 50px;
  font-size: 15px;
}
.van-card {
  position: relative;
  top: 50px;
}
.van-submit-bar__bar {
  padding-right: 0;
}
.van-submit-bar__price {
  font-size: 18px;
}
.van-card__price-integer {
  font-size: 12px;
}
</style>
